<template>
  <div class="head__column" ref="column" :style="{width: `${columnWidth}px`}">
    <div class="column-label__text"><slot></slot></div>
    <div class="column-label__fun">
      <div
        class="column-label__sort-filter"
        :class="showSortFilter ? 'show' : ''"
        @click.stop="toggleShowSortFilter"
        v-if="ifHaveSortFilter"
      >
        <div class="sort-filter__container" v-show="showSortFilter">
          <div class="sort__content">
            <div class="sort-item" @click.stop="handleToggleSort('asc')">顺序</div>
            <div class="sort-item" @click.stop="handleToggleSort('desc')">倒序</div>
          </div>
          <template v-if="type">
            <div class="split-line"></div>
            <div class="filter__content">
              <dict-selector
                v-if="type == 'dict'"
                ref="dictRef"
                :field="columnField"
                :dictCode="dictCode"
                @filterChange="handleFilterChange"
              ></dict-selector>
              <text-filter
                v-else-if="type == 'text'"
                ref="textRef"
                :field="columnField"
                @filterChange="handleFilterChange"
              ></text-filter>
              <date-filter
                v-else-if="type == 'date'"
                ref="dateRef"
                :field="columnField"
                @filterChange="handleFilterChange"
              ></date-filter>
            </div>
            <div class="split-line"></div>
            <div class="sort-filter__buttons" >
              <button class="clear-btn" @click.stop="handleClearFilter">清除筛选</button>
              <button class="cancel-btn" @click.stop="handleCancelFilter">取消</button>
              <button class="confirm-btn" @click.stop="handleConfirmFilter">确定</button>
            </div>
          </template>
        </div>
      </div>
      <div
        class="column-width__slider"
        :class="field != 'index' && field != 'checkbox' ? 'move' : ''"
        :ref="field != 'index' && field != 'checkbox' ? 'slider' : null"></div>
    </div>
  </div>
</template>

<script>
  import DictSelector from './components/DictSelector'
  import TextFilter from './components/TextFilter'
  import DateFilter from './components/DateFilter'
  export default {
    name: 'TableColumn',
    components: {
      DictSelector,
      TextFilter,
      DateFilter
    },
    props: {
      width: {
        type: Number,
        default: 50
      },
      sortable: {
        type: Boolean,
        default: false
      },
      field: {
        type: String,
        required: true
      },
      type: {
        type: String,
      },
      dictCode: {
        type: String,
      }
    },
    computed: {
      ifHaveSortFilter() {
        if(this.field == 'index' || this.field == 'checkbox') {
          return false;
        }
        return this.sortable
      },
      columnField() {
        // 对字段名进行处理，有的字段带有下划线
        let newField = this.field.split('_')[0]
        return newField;
      }
    },
    data() {
      return {
        columnWidth: this.width,
        showSortFilter: false,
        filterList: []
      }
    },
    mounted() {
      this.initBindSliderFunction();
    },
    methods: {
      // filter change事件
      handleFilterChange(data) {
        let index = this.filterList.findIndex(item => item.field == data.field)
        if(index > -1 && data.val) {
          let newRow = Object.assign({}, this.filterList[index], {
            val: data.val
          })
          this.filterList.splice(index, 1, newRow)
        } else if(index > -1) {
          this.filterList.splice(index, 1)
        } else {
          this.filterList.push(data)
        }
      },
      // 筛选确认事件
      handleConfirmFilter() {
        this.$emit('columnFilter', this.filterList)
        this.showSortFilter = false;
      },
      // 清除筛选数据
      handleClearFilter() {
        let index = this.filterList.findIndex(item => item.field == this.columnField)
        if(index > -1) this.filterList.splice(index, 1)
        if(this.$refs.dictRef) this.$refs.dictRef.clearData()
        if(this.$refs.textRef) this.$refs.textRef.clearData()
        if(this.$refs.dateRef) this.$refs.dateRef.clearData()
      },
      // 筛选取消事件
      handleCancelFilter() {
        this.showSortFilter = false;
      },
      // 切换显示filter
      toggleShowSortFilter() {
        this.showSortFilter = !this.showSortFilter;
      },
      // 切换数据顺序
      handleToggleSort(sort) {
        this.$emit('changeSort', this.field, sort)
        this.showSortFilter = false;
      },
      // 滑块初始化方法
      initBindSliderFunction() {
        if(!this.$refs.slider) return
        this.$refs.slider.onmousedown = (event) => {
          let startMoveX = event.pageX;
          let startWidth = this.columnWidth;

          let startLineX = this.$refs.column.offsetLeft + startWidth;
          document.onmousemove = (e) => {
            let endMoveX = e.pageX;
            let diffNumber = endMoveX - startMoveX;
            if(diffNumber < 0 && startWidth - 30 < Math.abs(diffNumber) ) {
              diffNumber = 0 - (startWidth - 30);
            }

            this.columnWidth = startWidth + diffNumber;

            this.$emit("setLine", true, startLineX + diffNumber)
          }
          document.onmouseup = (e) => {
            document.onmousemove = null;
            document.onmouseup = null;

            this.$emit("setLine", false, null)
            if(startMoveX === e.pageX) {
              return;
            }
            this.$emit('changeColumnWidth', this.field, this.columnWidth)
          }
        }
      },
    }
  }
</script>

<style>
.head__column {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  /* border-right: 1px dotted #ccc; */
  /* border-bottom: 1px solid #ccc; */
  user-select: none;
}
.head__column:hover {
  background: linear-gradient(180deg,#f9f9f9 0,#8fcaf3);
}
/* 文本内容 */
.column-label__text {
  padding-left: 4px;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
}
/* 方法区 */
.column-label__fun {
  height: 100%;
  display: flex;
}
.head__column:hover .column-label__sort-filter {
  display: block;
}
/* 排序 */
.column-label__sort-filter {
  height: 100%;
  width: 18px;
  cursor: pointer;
  display: none;
  position: relative;
}
.column-label__sort-filter.show {
  display: block;
  background: linear-gradient(180deg,#e0e0e0 0,#54b2f5);
}
.column-label__sort-filter::before {
  position: absolute;
  top: 10px;
  left: 6px;
  content: '';
  width: 6px;
  height: 6px;
  border-left: 1px solid #333;
  border-bottom: 1px solid #333;
  transform: rotate(-45deg);
}
/* 排序容器 */
.sort-filter__container {
  position: absolute;
  min-width: 200px;
  background: #fff;
  border: 1px solid #ddd;
  box-sizing: border-box;
  padding: 6px;
  top: 29px;
  box-shadow: 1px 2px 1px #eee;
}
.sort__content .sort-item {
  padding: 1px 2px 1px 6px;
}
.sort__content .sort-item:hover {
  background: #eee;
}
/* 筛选 */
/* 分割线 */
.split-line {
  margin: 6px 0;
  border-bottom: 1px solid #ddd;
}
.sort-filter__buttons {
  display: flex;
  justify-content: flex-end;
}
.clear-btn, .confirm-btn, .cancel-btn {
  padding: 0 2px;
  cursor: pointer;
  margin-left: 10px;
}

/* 改变宽度的滑块 */
.column-width__slider {
  height: 100%;
  width: 2px;
  border-right: 1px dotted #ccc;
  
}
.column-width__slider.move {
  cursor: e-resize;
}
</style>